<!--
 * @Author: chenr 526963089@qq.com
 * @Date: 2023-02-15 10:59:23
 * @LastEditors: chenr 526963089@qq.com
 * @LastEditTime: 2023-02-16 11:44:22
 * @Description: 
-->
<template>
  <a-menu
    v-model:selectedKeys="selectedKeys"
    mode="horizontal"
    @select="handleSelected"
  >
    <template v-for="item in menus">
      <SubMenu :info="item" />
    </template>
  </a-menu>
</template>
<script lang="ts" setup>
import { ref, watchEffect } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import SubMenu from './SubMenu.vue';
import { getCurrentLevelRouters } from '@/router/generatorRouter';
import { useRouterStore } from '@official/stores/async-routers';
const { addRouters } = useRouterStore();
const menus = getCurrentLevelRouters(addRouters || []);

/* 高亮选择项 & 打开选中项 */
const route = useRoute();
const selectedKeys = ref<string[]>(['/home']);
watchEffect(() => {
  selectedKeys.value = route.matched
    .slice(1, route.matched.length)
    .map((item) => item.path);
});

/* 跳转 */
const router = useRouter();
const handleSelected = (res: any) => {
  res && res.key ? router.push(res.key) : null;
};
</script>
